<template>
	<view class="pregnancy">
		<view class="item" v-for="item in doctorList" :key="item.id">
			<image :src="item.doctorHeadImg" mode="heightFix"></image>
			<view class="conBox">
				<text>{{item.doctorName}}</text>
				<text>{{item.doctorDepartment}}</text>
				<text>{{item.doctorAnswer}}回答&nbsp;&nbsp;&nbsp;{{item.doctorShowting}}人收听</text>
			</view>
			<image src="./image/mingpianRight.png" mode="heightFix" @click="router(item.id)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				doctorList: []
			};
		},
		onLoad({title}) {
			// console.log(title)
			this.$api.getMjtDoctorFenlei(title).then(res => {
				// console.log(res)
				if(res.code == 200) {
					this.doctorList = res.data
				}
			})
		},
		methods: {
			router(id) {
				uni.navigateTo({
					url: `/pages/questions/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less">
	.pregnancy {
		width: 100vw;
		height: calc(100vh - 88upx);
		margin: 0;
		padding: 0;
		background-color: rgb(250, 250, 250);

		.item {
			width: 90%;
			height: 15vh;
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(203, 203, 203, 0.5);

			image:first-child {
				height: 80%;
			}

			image:last-child {
				height: 25%;
			}

			.conBox {
				flex: 1;
				height: 100%;
				font-size: 26upx;
				box-sizing: border-box;
				padding: 0 3%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				text:nth-child(1) {
					font-size: 36upx;
				}

				text:nth-child(2) {
					color: rgba(0, 0, 0, 0.7);
				}

				text:nth-child(3) {
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
</style>
